<template>
  <view class="container">
   <UniNavBar :title="title" />
    <view class="u-content">
      <view class="info">住户信息</view>
      <view class="desc flex-all"><text>小区</text><p>{{obj.community.name}}</p></view>
      <view class="desc flex-all"><text>住户号</text><p>{{obj.member.house_number}}</p></view>
      <view class="desc flex-all"><text>业主姓名</text><p>{{obj.member.name}}</p></view>
      <view class="desc flex-all"><text>性别</text><p>{{obj.member.gender==1?'男':obj.member.gender==2?'保密':'女'}}</p></view>
      <view class="desc flex-all"><text>联系电话</text><p>{{obj.member.tel}}</p></view>
      <view class="desc flex-all"><text>居住人/租户</text><p>{{obj.member.occupier_name}}</p></view>
      <view class="desc flex-all"><text>联系电话</text><p>{{obj.member.occupier_phone}}</p></view>
      <view class="info">缴费信息</view>
      <view class="desc flex-all"><text>缴费总额</text><p class="price">￥{{obj.amount_total}}</p></view>
      <view class="desc flex-all"><text>单用费用</text><p class="price">￥{{obj.amount_total / obj.pay_month}}</p></view>
      <view class="desc flex-all"><text>缴纳期数</text><p>共{{obj.pay_month}}个月</p></view>
      <view class="desc flex-all"><text>发起时间</text><p>{{$util.timeFormat(obj.createtime)}}</p></view>
      <view class="desc flex-all"><text>缴纳时间</text><p>{{obj.paytime || ''}}</p></view>
      <view class="desc flex-all"><text>缴纳方式</text><p>{{obj.pay_type || ''}}</p></view>
      <view v-if="obj.images">
        <view class="info">发票信息</view>
        <view class="fp">
          <image :src="obj.images" mode="widthFix"></image>
        </view>
        <view class="fpTxt">*您的发票已安排邮寄，请注意查收，如有疑问请<text>致电客服：0451-1234567</text></view>
      </view>
    </view>
  </view>
</template>

<script>
import fapiao from '@/static/images/fapiao.png'
import UniNavBar from "@/components/uniNavbar/index.vue"
import {expensesView} from '@/api/pay.js'
export default {
  name:'payDetails',
  components:{UniNavBar},
  data() {
    return {
      fapiao,
      id:'',
      title:'缴费详情',
      invoiceFlag:false,
      obj:{
        community:{},
        member:{},
        expensesitem:[]
      }
    }
  },
  onLoad(options) {
    if (options && options.cid) {
      this.id = options.cid 
      this.getDetails()
    }
  },
  methods:{
    getDetails() {
      expensesView({ids:this.id}).then(res=>{
        this.obj = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .container {
    .u-content {
      padding: 30rpx 30rpx;
      .info {
        font-size: 32rpx;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #212121;
        line-height: 30rpx;
        margin-top: 30rpx;
      }
      .desc {
        font-size: 26rpx;
        color: #666;
        margin:34rpx 0;
        .price {
          font-size: 30rpx;
          font-weight: bold;
          color: #EF5104;
        }
      }
      .fp {
        image {
          width:480rpx;
          margin-top: 30rpx;
        }
      }
      .fpTxt {
        font-size: 18rpx;
        color: #999999;
        margin-top: 75rpx;
        text {
          color:#6750F8;
        }
      }
      .ubtn {
        margin-top: 140rpx;
      }
    }
  }
</style>